import { useSubAgentContext } from '@/lib/sidecar-runtime';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Bot, Clock, CheckCircle, XCircle, Loader2 } from 'lucide-react';

export function SubAgentStatusIndicator() {
  const { executions, activeExecutions } = useSubAgentContext();

  if (executions.length === 0) {
    return null;
  }

  return (
    <Card className="mb-4">
      <CardHeader>
        <CardTitle className="text-sm flex items-center gap-2">
          <Bot className="w-4 h-4" />
          Sub-Agent Activity
          {activeExecutions.length > 0 && (
            <Badge variant="default" className="ml-2">
              {activeExecutions.length} active
            </Badge>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-2">
          {executions.slice(-5).reverse().map((execution) => (
            <div
              key={execution.id}
              className="flex items-center justify-between p-2 bg-muted rounded-md"
            >
              <div className="flex items-center gap-2 flex-1">
                {execution.status === 'pending' && (
                  <Clock className="w-4 h-4 text-yellow-500" />
                )}
                {execution.status === 'running' && (
                  <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />
                )}
                {execution.status === 'completed' && (
                  <CheckCircle className="w-4 h-4 text-green-500" />
                )}
                {execution.status === 'failed' && (
                  <XCircle className="w-4 h-4 text-red-500" />
                )}
                
                <div className="flex-1">
                  <div className="font-medium text-sm">{execution.agentName}</div>
                  <div className="text-xs text-muted-foreground">
                    {execution.status === 'running' && 'Processing...'}
                    {execution.status === 'completed' && 
                      `Completed in ${execution.endTime && execution.startTime 
                        ? Math.round((execution.endTime.getTime() - execution.startTime.getTime()) / 1000) 
                        : 0}s`
                    }
                    {execution.status === 'failed' && execution.error}
                    {execution.status === 'pending' && 'Waiting...'}
                  </div>
                </div>
              </div>

              <Badge
                variant={
                  execution.status === 'completed' ? 'default' :
                  execution.status === 'running' ? 'secondary' :
                  execution.status === 'failed' ? 'destructive' :
                  'outline'
                }
              >
                {execution.status}
              </Badge>
            </div>
          ))}
        </div>

        {executions.length > 5 && (
          <div className="text-xs text-muted-foreground text-center mt-2">
            Showing last 5 of {executions.length} executions
          </div>
        )}
      </CardContent>
    </Card>
  );
}

export function SubAgentStatusBadge() {
  const { activeExecutions } = useSubAgentContext();

  if (activeExecutions.length === 0) {
    return null;
  }

  return (
    <div className="fixed bottom-4 right-4 z-[80]">
      <Card className="shadow-lg">
        <CardContent className="p-3">
          <div className="flex items-center gap-2">
            <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />
            <div className="text-sm font-medium">
              {activeExecutions.length} sub-agent{activeExecutions.length !== 1 ? 's' : ''} running
            </div>
          </div>
          <div className="mt-2 space-y-1">
            {activeExecutions.map((exec) => (
              <div key={exec.id} className="text-xs text-muted-foreground">
                • {exec.agentName}
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export function SubAgentExecutionList() {
  const { executions, clearExecutions } = useSubAgentContext();

  if (executions.length === 0) {
    return (
      <div className="text-center py-8 text-muted-foreground">
        <Bot className="w-12 h-12 mx-auto mb-2 opacity-50" />
        <p>No sub-agent executions yet</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold">
          Sub-Agent Execution History ({executions.length})
        </h3>
        <button
          onClick={clearExecutions}
          className="text-sm text-muted-foreground hover:text-foreground"
        >
          Clear History
        </button>
      </div>

      <div className="space-y-2">
        {executions.map((execution) => (
          <Card key={execution.id}>
            <CardContent className="p-4">
              <div className="flex items-start justify-between">
                <div className="flex items-start gap-3 flex-1">
                  {execution.status === 'pending' && (
                    <Clock className="w-5 h-5 text-yellow-500 mt-0.5" />
                  )}
                  {execution.status === 'running' && (
                    <Loader2 className="w-5 h-5 text-blue-500 animate-spin mt-0.5" />
                  )}
                  {execution.status === 'completed' && (
                    <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
                  )}
                  {execution.status === 'failed' && (
                    <XCircle className="w-5 h-5 text-red-500 mt-0.5" />
                  )}

                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <h4 className="font-semibold">{execution.agentName}</h4>
                      <Badge
                        variant={
                          execution.status === 'completed' ? 'default' :
                          execution.status === 'running' ? 'secondary' :
                          execution.status === 'failed' ? 'destructive' :
                          'outline'
                        }
                      >
                        {execution.status}
                      </Badge>
                    </div>

                    <div className="text-sm text-muted-foreground mb-2">
                      Started: {execution.startTime.toLocaleTimeString()}
                      {execution.endTime && (
                        <> • Duration: {Math.round((execution.endTime.getTime() - execution.startTime.getTime()) / 1000)}s</>
                      )}
                    </div>

                    {execution.input && (
                      <div className="mb-2">
                        <div className="text-xs font-semibold text-muted-foreground mb-1">Input:</div>
                        <div className="text-sm bg-muted p-2 rounded">
                          {execution.input.slice(0, 100)}
                          {execution.input.length > 100 && '...'}
                        </div>
                      </div>
                    )}

                    {execution.output && (
                      <div className="mb-2">
                        <div className="text-xs font-semibold text-muted-foreground mb-1">Output:</div>
                        <div className="text-sm bg-muted p-2 rounded">
                          {execution.output.slice(0, 200)}
                          {execution.output.length > 200 && '...'}
                        </div>
                      </div>
                    )}

                    {execution.error && (
                      <div className="mb-2">
                        <div className="text-xs font-semibold text-red-600 mb-1">Error:</div>
                        <div className="text-sm bg-red-50 text-red-700 p-2 rounded">
                          {execution.error}
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

